<template>
  <el-space :size="0" alignment="center">
    <div>
      <el-popover width="240px" :disabled="!(building||showDetail)" placement="top"
                  @show="this.$emit('markClick',indexStack)"
                  trigger="click">
        <template #reference>
          <el-tag :type="danger?'danger':(unUseAble.length!==0&&showDetail)?'warning':'success'">{{ mark.name }}
            <template v-if="showDetail&&Object.keys(mark.changeAble).length!==0">(
              {{
                (() => {
                  let changeAble = [];
                  for (let c in mark.changeAble) {
                    if (mark.changeAble[c].length === 0) {
                      changeAble.push('Δ' + c)
                    } else {
                      changeAble.push(mark.changeAble[c])
                    }
                  }
                  return changeAble.join(',')
                })()
              }}
              )
            </template>
          </el-tag>
        </template>

        <template #default>
          <template v-if="unUseAble.length!==0">
            子刻印中有多出刻印可承接量的刻印，名为:<br>{{
              unUseAble.map((item) => {
                return item.name
              }).join(',')
            }}
          </template>
          <template v-if="showDetail&&!building">
            mp:{{ getMp(mark) }}
            <br>
            复杂度:{{ mark.complexity }}
          </template>
          <template v-if="building">
            <el-row>
              <el-col :span="8">
                <el-button style="width: 100%" size="small" :disabled="isStart"
                           @click="this.$emit('leftAdd',indexStack)"
                           icon="arrow-left"></el-button>
              </el-col>
              <el-col :span="8">
                <el-button style="width: 100%" size="small" :disabled="isStart" @click="this.$emit('delete',indexStack)"
                           icon="delete"></el-button>
              </el-col>
              <el-col :span="8">
                <el-button style="width: 100%" size="small" @click="this.$emit('rightAdd',indexStack)"
                           icon="arrow-right"></el-button>
              </el-col>
            </el-row>
          </template>
        </template>
      </el-popover>
    </div>
    <el-icon v-if="subNum!==0">
      <arrow-right></arrow-right>
    </el-icon>
    <el-space :size="0" alignment="normal" direction="vertical">

      <template v-for="(sub,i) in mark.subMark">
        <soul-magic-mark-bar :show-detail :building class="left" :mark="sub"
                             :index-stack="[...indexStack,i]"
                             :danger="unUseAble.indexOf(sub)!==-1"
                             :style="subNum>1?'border-left: grey solid 1px':''"
                             @right-add="(j)=>{this.$emit('rightAdd',j)}"
                             @left-add="(j)=>{this.$emit('leftAdd',j)}"
                             @mark-click="(j)=>{this.$emit('markClick',j)}"
                             @delete="(j)=>{this.$emit('delete',j)}">
        </soul-magic-mark-bar>
      </template>
    </el-space>
  </el-space>
</template>

<script>
import {ArrowRight} from "@element-plus/icons-vue";
import DefaultBar from "@/components/bar/DefaultBar.vue";
import {checkMark, getMp, SoulMark} from "@/js/soulMagic";

export default {
  name: "SoulMagicMarkBar",
  components: {DefaultBar, ArrowRight},
  props: {
    mark: SoulMark(),
    showDetail: Boolean,
    building: Boolean,
    indexStack: {
      type: Array,
      default: []
    },
    danger: Boolean
  }, methods: {
    getMp
  },
  computed: {
    subNum() {
      return this.mark.subMark.length
    },
    isStart() {
      return this.indexStack.length === 0
    },
    unUseAble() {
      return checkMark(this.mark)[0]
    }
  }, emits: ['rightAdd', 'leftAdd', 'delete', 'markClick']
}
</script>

<style scoped>
</style>
